<template>
  <div>
    <p>{{ object }}</p>
    <p>
      <button @click="changeObjectA">改变A</button>
      <button @click="changeObjectC">改变C</button>
    </p>

    <hr />

    <p>{{ food }}</p>
    <button @click="changeFood">change food</button>

    <hr />

    <p>{{ foodList }}</p>
    <p><button @click="changeFoodList">change foodList</button></p>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  shallowReactive,
  shallowRef,
} from "vue";
export default defineComponent({
  setup() {
    //shallowReactive   shallowReactive只处理对象内最外层属性的响应式也就是浅响应式
    let object = shallowReactive({ a: 1, b: { c: 2 } });
    let changeObjectA = () => {
      object.a++;
    };
    let changeObjectC = () => {
      object.b.c++;
    };


    //shallowRef只处理基本数据类型的响应式，不进行引用类型的响应式
    let food = shallowRef("娃哈哈");
    
    let changeFood = () => {
        food.value = "水蜜桃";
    }

    let foodList = shallowRef([{id : 1, foodName : "西红柿"},{id : 2, foodName : "土豆"}]);

    let changeFoodList = () => {
        foodList.value[0].foodName = "枸杞"  // 不渲染页面
        console.log(foodList.value[0]);
    }



    return {
      object,
      changeObjectA,
      changeObjectC,
      food,
      changeFood,
      foodList,
      changeFoodList
    };
  },
});
</script>

<style scoped >
</style>
